<template>
	<div class="galary">
		<ly-tab
		    v-model="selectedId"
		    :items="items"
		    :options="options"
			class="tabColor"
			@change="handleClick">
		</ly-tab>
		<div class="cate">
			<span>全部</span>
			<span>其他</span>
		</div>
		<compontent :is="type"></compontent>
	</div>
	
</template>

<script>
import galaryContent from './galaryContent.vue'
export default {
  name: 'detailGalary',
	data(){
		return{
			type:'galaryContent',
			galaryList:[
				"人工智能",
				"人工智能",
				"人工智能",
				"人工智能",
				"人工智能",
				"人工智能",
				"人工智能",
				"人工智能"
			],
			 selectedId: 0,
			      items: [],
			      options: {
			        activeColor: '#0bc071'
			      },
		}
	},
	methods:{
		handleClick(item,index){
			console.log(index)
			this.$store.state.index = index
		}
	},
	computed:{
		loopGalaryList(){
			for(let i=0;i<this.galaryList.length;i++){
				let item = {label:this.galaryList[i]}
				this.items.push(item)
			}
		}
	},
	components:{
		galaryContent
	},
	mounted(){
		this.loopGalaryList
	}
	
 
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
	.galary
	  position:absolute
	  top:.88rem
	  left:0
	  right:0
	  bottom:0
	  color:#fff
	  z-index:100
	  background:#fff
	  .galary>a
	    color:#000
	  .tabColor
	    background:#fff
	    border-color:#fff
	  .cate
	    background:#edf0f5
	    line-height:.6rem
	    color:#000
	  .cate > span
	    margin-left:.22rem
	    font-size:.3rem
	  .wrapper
	    background:#fff
	    .imgWrapper
	      width:47%
	      background:red
	      margin:.12rem
	      float:left
	    .imgWrapper > img
	      width:100%
</style>
